<template>
	<!-- <el-card class="box-card el-card-flex">
        <div class="text item" style="padding:80px;padding-bottom:20px"> -->
	<el-form ref="formData" :model="formData" label-width="200px" style="padding:80px 0 0 80px">
		<el-form-item label="会议预定时间间隔:" prop="intervalTime" :rules="[{required: true,message: '请选择时间间隔'}]">
			<el-col :span="16">
				<el-radio-group v-model="formData.intervalTime" v-if="show" @change="intervalTimeChange">
					<el-radio :label="1" border>1小时</el-radio>
					<el-radio :label="2" border>2小时</el-radio>
				</el-radio-group>
				<span v-else>{{formData.intervalTime}}小时</span>
			</el-col>
		</el-form-item>
		<el-form-item label="会议预定开始时间:" prop="startTime" :rules="[{ required: true, message: '请选择时间', trigger: 'change'}]">
			<el-col :span="16">
				<el-time-select :clearable="false" v-model="formData.startTime" :picker-options="startPicker()" style="width:300px"
				 placeholder="选择时间" v-if="show">
				</el-time-select>
				<span v-else>{{formData.startTime}}</span>
			</el-col>
		</el-form-item>
		<el-form-item label="会议预定结束时间:" prop="endTime" :rules="[{ required: true, message: '请选择时间', trigger: 'change'}]">
			<el-col :span="16">
				<el-time-select :clearable="false" v-model="formData.endTime" :picker-options="endPicker()" style="width:300px"
				 placeholder="选择时间" v-if="show">
				</el-time-select>
				<span v-else>{{formData.endTime}}</span>
			</el-col>
		</el-form-item>
		<div style="padding-left:140px;margin-bottom:20px">
			<el-button type="primary" v-if='show' @click="handleCheckSave('formData')">保 存 <i class="el-icon-document-checked"></i></el-button>
			<el-button v-if='!show' @click="handleCheckUp">修 改 <i class="el-icon-document-checked"></i></el-button>
			<el-button v-if='show' @click="handleCheckCancel('formData')">取 消 <i class="el-icon-refresh-left"></i></el-button>
		</div>
	</el-form>
	<!-- </div>
        
    </el-card> -->
</template>
<script>
	import {
		Dialog,
		Table,
		TableColumn,
		Pagination,
		MessageBox,
		Message,
		Drawer,
		Tabs,
		TabPane,
		Upload
	} from 'element-ui'
	import {
		getTime, //时间设置时间
		putTime, //时间修改
	} from '@/api/conference/Initialize.js'
	export default {
		components: {
			'el-dialog': Dialog, // 对话框
			'el-table': Table, // 表格
			'el-table-column': TableColumn, // 表格列
			'el-pagination': Pagination, // 分页
			'el-drawer': Drawer, // 抽屉
			'el-tabs': Tabs, // 标签页
			'el-tab-pane': TabPane, // 标签页列
			"el-upload": Upload, //上传
		},
		data() {
			return {
				formData: {
					intervalTime: 1,
					startTime: '08:00',
					endTime: '23:00',
					timeSegId: ''
				},
				show: false
			}
		},
		created() {
			this.getTime()
		},
		methods: {
			intervalTimeChange() {
				this.formData.startTime = ""
				this.formData.endTime = ""
			},
			/* 预定开始时间控制项 */
			startPicker() {
				let options = {
					start: '08:00',
					step: '0'+this.formData.intervalTime+':00',
					end: '18:00',
					maxTime: this.formData.endTime
				}
				if (this.formData.intervalTime == 2) {
					if (this.formData.endTime) {
						let endVal = Number(this.formData.endTime.split(':')[0]) - 1
						if (endVal < 10) {
							endVal = '0' + endVal
						}
						options.maxTime = endVal + ':00'
					}
				}
				return options
			},
			/* 预定结束时间控制项 */
			endPicker() {
				let options = {
					start: '08:00',
					step: '0'+this.formData.intervalTime+':00',
					end: '23:00',
					minTime: this.formData.startTime
				}
				if (this.formData.intervalTime == 2) {
					if (this.formData.startTime) {
						let startVal = Number(this.formData.startTime.split(':')[0]) + 1
						if (startVal < 10) {
							startVal = '0' + startVal
						}
						options.minTime = startVal + ':00'
					}
				}
				return options
			},
			getTime() {
				getTime().then((res) => {
					if (res.data.code == 10000) {
						this.formData = res.data.data
					}
				})
			},
			//修改
			handleCheckUp() {
				this.show = true;

			},
			//保存
			handleCheckSave(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						putTime({
							intervalTime: this.formData.intervalTime,
							startTime: this.formData.startTime,
							endTime: this.formData.endTime,
							timeSegId: this.formData.timeSegId
						}).then((res) => {
							if (res.data.code == 10000) {
								Message({
									type: 'success',
									message: '修改成功'
								});
								this.show = false;
								this.getTime()
							} else {
								// Message({
								//     type: 'error',
								//     message: res.data.msg
								// });
							}
						})
					}
				})

			},
			//取消
			handleCheckCancel(formName) {
				this.show = false;
				// this.getTime()
				this.$refs[formName].resetFields();
			}
		}
	}
</script>
